<script setup lang="ts">
defineOptions({
  name: "myExecuteOrders"
});

import { ref, onMounted, onActivated, onUnmounted, markRaw, inject } from "vue";
import { useRouter } from "vue-router";
import { queryGasOrderList } from "@/api/modules/operation";
import commonTable from "@/views/common/components/commonTable/index.vue";
import { View, ValidationHistory } from "@px-ui/icons-vue";
import { useTableCloumns } from "../hooks";
import { useUpdateDomHeight, useCancelUpdateDomHeight } from "@/hooks/useCommon";

const router = useRouter();

const activeTab = inject("activeTab", ref<string>(""));
const activeFlag = inject("activeFlag", ref<boolean>(false));

const gap = 88;
const defaultHeight = 606;
const myExecuteOrdersTableRef = ref<HTMLElement | null>(null);
const commonTableRef = ref<CommonTable.TableRefType>(null);
const scrollbarHeight = ref<number>(defaultHeight);

const params: Record<string, any> = {
  // 0：总览，1：我的工单
  scope: 1,
  // 1:气瓶 2：酸桶
  taskType: 1
};

// status    1 执行中    2 执行完成
const operationOptions: Array<CommonTable.operationOptionItemType> = [
  {
    content: "查看",
    auth: "GAS_OPERATION_BOTTLEMANAGE_REPLACEBOTTLE_CHECKBTN",
    icon: markRaw(View),
    click: (scope: any) => check(scope)
  },
  {
    content: "执行",
    auth: "GAS_OPERATION_BOTTLEMANAGE_REPLACEBOTTLE_EDITBTN",
    isHidden({ row }: any) {
      return row.taskStatus === 2;
    },
    icon: markRaw(ValidationHistory),
    click: (scope: any) => execute(scope)
  }
];

const getRowKey = row => {
  return row.id;
};

const headerCellStyleFn = ({ row, column, rowIndex, columnIndex }: CommonTable.CellType): Record<string, string> => {
  const style = {};
  if (columnIndex === 2) {
    style["text-align"] = "center";
  }
  return style;
};

const check = scope => {
  const {
    row: { id = "", taskStatus: status }
  } = scope;
  if (!id) return;
  const type = "check";
  router.push({ path: "/gas/operation/bottleManage/replaceBottle/check", query: { type, status, id } });
};

const execute = scope => {
  const {
    row: { id = "", taskStatus: status }
  } = scope;
  if (!id) return;
  const type = "edit";
  router.push({ path: "/gas/operation/bottleManage/replaceBottle/edit", query: { type, status, id } });
};

const tableCloumns = ref<Array<CommonTable.TableCloumnsType>>(useTableCloumns(check));

onMounted(async () => {
  await useUpdateDomHeight(scrollbarHeight, myExecuteOrdersTableRef, gap, defaultHeight);
});

onUnmounted(() => useCancelUpdateDomHeight());

onActivated(() => {
  if (activeFlag.value && activeTab.value === "myOrders") {
    commonTableRef.value.queryTableData(null, true);
  }
});
</script>

<template>
  <div ref="myExecuteOrdersTableRef" class="my-execute-orders-table">
    <commonTable
      ref="commonTableRef"
      indexNeed
      immediate
      :operationOptions="operationOptions"
      :tableCloumns="tableCloumns"
      :height="scrollbarHeight"
      :row-key="getRowKey"
      :header-cell-style="headerCellStyleFn"
      :axiosApi="queryGasOrderList"
      :params="params"
    />
  </div>
</template>
